<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
    
    <style>
    	.carousel-control.right.yinyingR{
    		right: 310px;
    		height:280px;
    	}
    	.carousel-control.left.yinyinglL{
    		left:310px;
    		height:280px;
    	}
    	
    	.carousel-inner.center{
    		width: 520px;
    		margin: 0 auto;
    	}
    	
    	.carousel-caption.ziTi{
    		font-size: 20px;
    		color:blue;
    	}
    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
		
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
					  <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					  </ol>
					
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner center" role="listbox">
					    <div class="item active">
					      <img src="img/1.jpg" alt="...">
					      <div class="carousel-caption ziTi">
					        我是图片轮播1
					      </div>
					    </div>
					    <div class="item">
					      <img src="img/2.jpg" alt="...">
					      <div class="carousel-caption ziTi">
					        我是图片轮播2
					      </div>
					    </div>
					    <div class="item">
					      <img src="img/4.jpg" alt="...">
					      <div class="carousel-caption ziTi">
					        我是图片轮播2
					      </div>
					    </div>
					    <div class="item">
					      <img src="img/5.jpg" alt="...">
					      <div class="carousel-caption ziTi">
					        我是图片轮播2
					      </div>
					    </div>
					    ...
					  </div>
					
					  <!-- Controls -->
					  <a class="left carousel-control yinyinglL" href="#carousel-example-generic" role="button" data-slide="prev">
					    <span class="glyphicon glyphicon-chevron-left"></span>
					    <span class="sr-only">Previous</span>
					  </a>
					  <a class="right carousel-control yinyingR" href="#carousel-example-generic" role="button" data-slide="next">
					    <span class="glyphicon glyphicon-chevron-right"></span>
					    <span class="sr-only">Next</span>
					  </a>
					</div>


		</div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../lib/jquery-3.1.1.js"></script>
    <script src = "bootstrap/dist/js/bootstrap.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    
  </body>
</html>

